import MFormItem from '../MFormItem';
import { Col, DatePicker, Input, InputNumber, Radio, Select } from 'antd';
import React from 'react';

const { Option } = Select;

export const FormItem4Input = props => {
  const { showEdit } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...props}>
        <Input autoComplete="off" readOnly={showEdit} placeholder={'请输入'} style={{ width: '100%' }}></Input>
      </MFormItem>
    </Col>
  );
};

export const FormItem4InputNumber = props => {
  const { min, max, showEdit, ...other } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...other}>
        <InputNumber
          disabled={showEdit}
          min={min}
          max={max}
          autoComplete="off"
          placeholder={'请输入'}
          style={{ width: '100%' }}
        ></InputNumber>
      </MFormItem>
    </Col>
  );
};

export const FormItem4DatePicker = props => {
  const { showEdit } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...props}>
        <DatePicker disabled={showEdit} style={{ width: '100%' }} />
      </MFormItem>
    </Col>
  );
};

export const FormItem4Select = props => {
  const { items,showCode = false, showEdit, ...other } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...other}>
        <Select style={{ width: '100%' }} dropdownMatchSelectWidth={false}>
          {items
            ? items.map((item, index) => {
              return showCode ? (
                <Option key={index} value={item.dictValue} disabled={showEdit}>
                  {`(${item.dictValue})${item.dictName}`}
                </Option>
              ) : (
                <Option key={index} value={item.dictValue} disabled={showEdit}>
                  {item.dictName}
                </Option>
              );
            })
            : null}
        </Select>
      </MFormItem>
    </Col>
  );
};

export const FormItem4Radio = props => {
  const { items, showEdit, ...other } = props;
  return (
    <Col className="gutter-row" span={12}>
      <MFormItem {...other}>
        <Radio.Group>
          {items
            ? items.map((item, index) => {
                return (
                  <Radio disabled={showEdit} key={index} value={item.dictValue}>
                    {item.dictName}
                  </Radio>
                );
              })
            : null}
        </Radio.Group>
      </MFormItem>
    </Col>
  );
};
